<template>
  <div class="container">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" offset="50">
        <ArticleItem v-for="item in list" :key="item.art_id" :artItem="item" @disLikeEV="disLikeFn" @reportEV="reportFN"  @click.native="itemClickFn(item.art_id)"></ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import ArticleItem from '../../../components/ArticleItem.vue'
import { getAllArticleListAPI, dislikeArticleAPI, reportArticleAPI } from '@/api'
import Notify from '@/ui/Notify'
export default {
  name: 'MyArticleList',
  props: {
    // list: Array // 文章列表数组
    channelId: Number // 频道ID
  },
  data () {
    return {
      list: [], // 文章列表数组
      loading: false, // 底部加载状态
      finished: false, // 底部加载完成状态
      theTime: new Date().getTime(), // 用于分页
      isLoading: false // 顶部加载状态
    }
  },
  components: {
    ArticleItem
  },
  methods: {
    async getArticleListFn () {
      const res = await getAllArticleListAPI({
        channel_id: this.channelId, // 默认先请求推荐的数据
        timestamp: this.theTime
      })

      this.list = [...this.list, ...res.data.data.results]
      this.theTime = res.data.data.pre_timestamp

      // 如果不关，底部一直是加载的状态
      this.loading = false
      // 加载全部数据后返回已加载全部数据
      if (res.data.data.pre_timestamp === null) {
        this.finished = true
      }

      // 顶部的加载状态改为false
      this.isLoading = false
    },
    // 底部加载事件方法
    async onLoad () {
      if (this.list.length === 0) {
        this.loading = false
        return
      }
      this.getArticleListFn()
    },
    // 顶部刷新数据方法
    async onRefresh () {
      this.list = []
      this.theTime = new Date().getTime()
      this.getArticleListFn()
    },
    // 反馈-不感兴趣
    async disLikeFn (id) {
      try {
        await dislikeArticleAPI({ artId: id })
        // res里没有什么有用的信息,所以await往下放行，就证明请求和响应成功，反馈成功
        Notify({ type: 'success', message: '反馈成功' })
      } catch (err) {
        Notify({ type: 'warning', message: '反馈失败-联系程序员' })
      }
    },
    // 反馈垃圾内容的方法
    async reportFN (id, value) {
      try {
        await reportArticleAPI({
          artId: id,
          type: value
        })
        Notify({ type: 'success', message: '举报成功' })
      } catch (err) {
        Notify({ type: 'warning', message: '举报失败' })
      }
    },
    // 文章单元格 - 点击事件
    itemClickFn (id) {
      this.$router.push({
        path: `/detail?art_id=${id}`
      })
    }
  },
  async created () {
    this.getArticleListFn()
  }
}
</script>
<style scoped>
</style>
